<script lang="ts" setup>
import { reactive, provide, toRef } from 'vue';
import { buttonGroupProps } from './button-group';
import { buttonGroupContextKey } from '@/tokens/button';
defineOptions({
  name: 'WindowsButtonGroup',
});
const props = defineProps(buttonGroupProps);
provide(
  buttonGroupContextKey,
  reactive({
    size: toRef(props, 'size'),
  })
);
</script>

<template>
  <div class="button-group" :style="{ 'flex-direction': flexdirection }">
    <slot />
  </div>
</template>

<style scoped lang="scss">
.button-group {
  display: flex;
  flex-wrap: wrap;
}
</style>
